// 1.准备导入文件
import { checkPhone, checkCode } from "../utils/check.js";
console.log(checkPhone('18722098839'));
console.log(checkCode('12345678'));

// 2.准备安装webpack打包，命令：npm i webpack webpack-cli --save-dev

// 3. 编写js核心代码逻辑
// document.querySelector('.btn').addEventListener('click', () => {
//     const phone = document.querySelector('.login-form [name=mobile]').value
//     const code = document.querySelector('.login-form [name=code]').value

//     if (!checkPhone(phone)) {
//         console.log('手机号长度必须是11位');
//         return
//     }

//     if (!checkCode(code)) {
//         console.log('验证码长度必须是6位');
//         return
//     }

//     console.log('提交到服务器登录...');

// })

// 4.使用html-webpack-plugin插件复制html文件

// 5.将css文件引入到js文件，下载css-loader 和 style-loader 命令：npm i css-loader style-loader --save-dev
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

// 6.提取css文件到单独的css文件里面 mini-css-extract-plugin

// 7.压缩css文件npm i css-minimizer-webpack-plugin --save-dev

// 8.引入less代码,npm i less less-loader --save-dev
import './index.less'

// 9.打包图片资源
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

// 10.导入工具包文件
import myAxios from '../utils/request.js'
import { myAlert } from '../utils/alert.js'

document.querySelector('.btn').addEventListener('click', () => {
    const phone = document.querySelector('.login-form [name=mobile]').value
    const code = document.querySelector('.login-form [name=code]').value

    if (!checkPhone(phone)) {
        //console.log('手机号长度必须是11位');
        myAlert(false, '手机号长度必须是11位')
        return
    }

    if (!checkCode(code)) {
        //console.log('验证码长度必须是6位');
        myAlert(false, '验证码长度必须是6位')
        return
    }

    myAxios({
        url: '/v1_0/authorizations',
        method: 'POST',
        data: {
            mobile: phone,
            code: code
        }
    }).then(res => {
        myAlert(true, '登录成功')
        console.log(res);

        localStorage.setItem('token', res.data.token)
        location.href = '../content/index.html'
    }).catch(error => {
        myAlert(false, error.response.data.message)
    })
})

// 11. 测试webpack-dev-server服务
console.log('测试webpack-dev-server服务');

// 14.前端代码使用环境变量，生产环境下失效打印语句
if (process.env.NODE_ENV === 'production') {
    console.log = function () { }

}
console.log('开发模式有效，生产模式无效');

// 15.source-map 调试代码
console.warn('123')

// 16.设置路径解析别名
import youAxios from '@/utils/request.js'
console.log(youAxios);
